<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link th:href="@{/static/bootstrap/css/bootstrap.min.css}"
	rel="stylesheet">
<link rel="stylesheet"
	th:href="@{/static/jquery-file-upload/css/jquery.fileupload.css}">
<link rel="stylesheet" th:href="@{/static/css/sb-admin-2.css}">
<link th:href="@{/static/codemirror/lib/codemirror.css}"
	rel="stylesheet">
<link th:href="@{/static/css/blog.css}" rel="stylesheet">
<!--[if lt IE 9]>
	  <script th:src="@{/static/js/html5shiv.min.js}"></script>
	  <script th:src="@{/static/js/respond.min.js}"></script>
	<![endif]-->
<meta name="_csrf" th:content="${_csrf.token}" />
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<style type="text/css">
.table-borderless tbody tr td, .table-borderless tbody tr th,
	.table-borderless thead tr th {
	border: none;
}
</style>
<title>博客撰写</title>
</head>
<body>
	<nav th:replace="mgr/base/nav :: active('article')"></nav>
	<div id="page-wrapper" style="padding: 10px">
		<div class="container-fluid">
			<div class="row" style="margin-top: 10px">
				<div class="col-md-12">
					<div class="alert alert-info"><p>当前编辑器：<span th:text="${editor == 'HTML' ? '富文本' : 'MARKDOWN'}"></span>
					&nbsp;&nbsp;&nbsp;
					<a th:href="@{/mgr/article/write?editor=}+${editor == 'HTML' ? 'MD' : 'HTML'}" th:text="${editor == 'HTML' ? 'MARKDOWN' : '富文本'}"></a>
					</p>
					</div>
					<div class="form-group">
						<label>博客标题</label><input type="text" class="form-control"
							placeholder="博客标题(1-200个字符)" maxlength="200" id="title"
							th:value="${article.title}" />
					</div>
					<div class="form-group">
						<label>博客编辑器</label>

						<!-- Nav tabs -->
						<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active"><a href="#editor"
								role="tab" data-toggle="tab">编辑器</a></li>
							<li role="presentation"><a href="#preview" role="tab"
								data-toggle="tab" id="previewLab">预览</a></li>
						</ul>
						<div class="tab-content" style="margin-top: 10px">
							<div role="tabpanel" class="tab-pane active" id="editor">
								<div class="md-header btn-toolbar">
									<div class="btn-group">
										<button class="btn-default btn-sm btn" type="button"
											data-md-handler="file">
											<span class="glyphicon glyphicon-file"></span>
										</button>
										<button class="btn-default btn-sm btn" type="button"
											data-md-handler="code" th:if="${editor == 'HTML'}">
											<span class="glyphicon glyphicon-euro"></span>
										</button>
									</div>
								</div>
								<textarea id="text" style="height: 600px" class="form-control"
									th:text="${article.content}"></textarea>
							</div>
							<div role="tabpanel" class="tab-pane" id="preview">
								<div class="embed-responsive embed-responsive-16by9">
									<iframe class="embed-responsive-item"
										th:src="@{/mgr/article/write/preview}"></iframe>
								</div>
							</div>
						</div>

					</div>
					<div class="form-group">
						<label>别名</label><input type="text" class="form-control"
							placeholder="博客别名(1-200个字符，不能为纯数字以及包含'<'、'>','='和空格等字符)"
							maxlength="200" id="alias" th:value="${article.alias}" />
					</div>
					<div class="form-group">
						<label>摘要 </label>
						<textarea class="form-control" cols="8" rows="8"
							placeholder="(0~500字符)" id="summary" th:text="${article.summary}"></textarea>
					</div>
					<div class="form-group">
						<label>特征图像</label><input type="text" class="form-control"
							placeholder="特征图像"
							maxlength="255" id="featureImage" th:value="${article.featureImage}" />
					</div>
					<div class="form-group">
						<label>标签 </label> <input type="text" id="tags-input"
							class="form-control" placeholder="标签(1-20个字符)，按回车键确认"
							maxlength="20" />
						<div id="tags-container" class="well" style="margin-top: 5px"></div>
					</div>
					<div class="form-group">
						<label>空间</label> <select class="form-control" id="space">
							<option th:each="space : ${spaces}" th:text="${space.name}"
								th:value="${space.id}"></option>
						</select>
					</div>
					<div class="form-group">
						<label>来源</label> <select class="form-control" id="from">
							<option th:if="${article.from != null}"
								th:value="${article.from.name()}" selected="selected"
								th:text="'当前:'+${messages.getMessage(article.from.getMessage())}"></option>
							<option value="ORIGINAL">原创</option>
							<option value="COPIED">转载</option>
						</select>
					</div>
					<div id="lock_container"></div>
					<div class="form-group">
						<label>状态</label> <select class="form-control" id="status">
							<option th:if="${article.status != null}"
								th:value="${article.status.name()}"
								th:text="${messages.getMessage(article.status.getMessage())}"></option>
							<option value="DRAFT">草稿</option>
							<option value="PUBLISHED">发布</option>
							<option value="SCHEDULED">计划</option>
						</select>
					</div>
					<div class="checkbox">
						<label th:if="${article.isPrivate == null || !article.isPrivate}">
							<input type="checkbox" id="private" />私人博客
						</label> <label th:if="${article.isPrivate != null && article.isPrivate}"><input
							type="checkbox" id="private" checked="checked" />私人博客 </label>
					</div>
					<div class="form-group"
						th:style="${article.isSchedule() ? '' : 'display: none'}"
						id="scheduleContainer">
						<label>计划发表日期</label> <input type="text" class="form-control"
							id="scheduleDate"
							th:value="${article.isSchedule() ? #dates.format(article.pubDate, 'yyyy-MM-dd HH:mm') : #dates.format(#dates.createNow(),'yyyy-MM-dd HH:mm')}"><br>
					</div>
					<div class="form-group">
						<label>博客优先级(优先级越高排名越靠前)</label> <input type="text"
							class="form-control" placeholder="1~100" maxlength="3" id="level"
							th:value="${article.level}" />
					</div>
					<div class="checkbox">
						<label
							th:if="${article.allowComment == null || !article.allowComment}">
							<input type="checkbox" id="allowComment" />允许评论
						</label> <label
							th:if="${article.allowComment != null && article.allowComment}"><input
							type="checkbox" id="allowComment" checked="checked" />允许评论 </label>
					</div>
					<div class="form-group" style="text-align: center">
						<button class="btn btn-primary" type="button" id="submit-art">提交</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="codeModal" tabindex="-1"
		role="dialog" aria-labelledby="codeModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="codeModal">代码</h4>
				</div>
				<div class="modal-body">
					<textarea class="form-control" cols="8" rows="20" id="code_area"></textarea>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-default" id="code-insert">插入</button>
				</div>
			</div>
		</div>
	</div>
	
	<input type="hidden" th:value="${editor}" id="editorMode"/>
	<input type="hidden" th:value="${article.status}" id="oldStatus" />
	<input type="hidden" th:value="${article.tagStr}" id="oldTags"
		style="display: none" />
	<input type="hidden" th:value="${article.lockId}" id="oldLock"
		style="display: none" />
	<input type="hidden" th:value="${article.id}" id="id"
		style="display: none" />
	<input type="hidden"
		th:value="${article.space == null ? '' : article.space.id}"
		id="oldSpace" style="display: none" />
	<div th:replace="base/foot_source"></div>
	<script th:src="@{/static/codemirror/lib/codemirror.js}"></script>
	<script th:src="@{/static/codemirror/addon/mode/overlay.js}"></script>
	<script th:src="@{/static/codemirror/mode/javascript/javascript.js}"></script>
	<script th:src="@{/static/codemirror/mode/css/css.js}"></script>
	<script th:src="@{/static/codemirror/mode/xml/xml.js}"></script>
	<script th:src="@{/static/codemirror/mode/htmlmixed/htmlmixed.js}"></script>
	<script th:src="@{/static/codemirror/mode/markdown/markdown.js}"></script>
	<script th:src="@{/static/codemirror/mode/gfm/gfm.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/jquery-file-upload/js/load-image.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/js/canvas-to-blob.min.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/vendor/jquery.ui.widget.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.iframe-transport.js}"></script>
	<script th:src="@{/static/jquery-file-upload/js/jquery.fileupload.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-ui.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-process.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-image.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-audio.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-video.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-validate.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/mgr/editor.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/mgr/editor_file.js}"></script>
	<script type="text/javascript" th:src="@{/static/js/mgr/common.js}"></script>
</body>
</html>
